<template>
  <div class="setting">
    <div class="card">
      <div class="title">页面背景</div>
      <div class="content">
        <el-form-item label="背景色">
          <dc-color-picker v-model="settingData.background.color"></dc-color-picker>
        </el-form-item>
        <el-form-item label="背景图片">
          <div class="sa-flex">
            <sa-uploader v-model="settingData.background.src" fileType="image"></sa-uploader>
            <div class="tip">建议宽度：750</div>
          </div>
        </el-form-item>
      </div>
    </div>
    <div class="card">
      <div class="title">头部设置</div>
      <div class="content">
        <el-form-item label="头部样式">
          <el-radio-group v-model="settingData.navbar.mode">
            <el-radio label="normal">标准</el-radio>
            <el-radio label="inner">
              沉浸式
              <el-popover
                popper-class="title-popover"
                placement="top-start"
                :width="232"
                trigger="hover"
                :popper-options="{ boundariesElement: 'body' }"
                content="沉侵式头部仅支持微信小程序、APP 建议页面第一个组件为图片展示类组件"
              >
                <template #reference>
                  <el-icon class="popover-tip">
                    <Warning />
                  </el-icon>
                </template>
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="settingData.navbar.mode == 'inner'" label="常驻显示">
          <el-radio-group v-model="settingData.navbar.alwaysShow">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">
              开启
              <el-popover
                popper-class="title-popover"
                placement="top-start"
                :width="232"
                trigger="hover"
                :popper-options="{ boundariesElement: 'body' }"
                content="常驻显示关闭后,头部小组件将在页面滑动时淡入"
              >
                <template #reference>
                  <el-icon class="popover-tip">
                    <Warning />
                  </el-icon>
                </template>
              </el-popover>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="背景">
          <el-radio-group v-model="settingData.navbar.type">
            <el-radio label="color">纯色</el-radio>
            <el-radio label="image">图片</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="settingData.navbar.type == 'color'" label="选择颜色">
          <dc-color-picker v-model="settingData.navbar.color"></dc-color-picker>
        </el-form-item>
        <el-form-item v-if="settingData.navbar.type == 'image'" label="选择图片">
          <sa-uploader v-model="settingData.navbar.src" fileType="image"></sa-uploader>
        </el-form-item>
      </div>
    </div>
    <div class="card">
      <div class="title sa-flex">
        头部内容
        <div class="warning">
          可切换到
          {{ platformType == 'WechatMiniProgram' ? '其他' : '小程序' }}
          平台设置独立样式
        </div>
      </div>
      <div class="content">
        <table class="navbar-map">
          <tbody>
            <div
              class="left"
              :style="{
                width: scale * 2 + 1 + 'px',
              }"
              v-if="templateDetailType == 'diypage'"
            >
              <img src="/static/images/shop/decorate/header-diypage.png" />
            </div>
            <tr>
              <td
                class="map-item"
                :class="
                  state.tempData.minCol <= tdItem && tdItem <= state.tempData.maxCol
                    ? 'map-item--active'
                    : ''
                "
                :style="{
                  width: scale + 'px',
                  height: scale + 'px',
                }"
                v-for="tdItem in 8"
                :key="tdItem"
                @click.stop="selectItem(1, tdItem)"
                @mouseover="onMouseover(1, tdItem)"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </td>
            </tr>
            <div class="WechatMiniProgram" v-if="platformType == 'WechatMiniProgram'">
              <img :src="'./static/images/shop/decorate/header-' + platformType + '.png'" />
            </div>
            <div
              class="position-item sa-flex sa-row-center"
              :class="state.selectedIndex == sindex ? 'position-item--active' : ''"
              v-for="(style, sindex) in state.selectedData"
              :style="{
                width: style.width * scale + 'px',
                height: style.height * scale + 'px',
                top: style.top * scale + 'px',
                left: style.left * scale + 'px',
              }"
              :key="style"
              @mouseover="onCancelSelect"
              @click.stop="onPositionSelect(sindex)"
            >
              {{ style.width }}*{{ style.height }}
              <el-icon class="close" @click.stop="deleteItem(sindex)">
                <CircleCloseFilled />
              </el-icon>
            </div>
          </tbody>
        </table>
        <template v-if="state.selectedData.length > 0">
          <el-form-item label="头部类型">
            <el-radio-group v-model="state.selectedData[state.selectedIndex].type">
              <el-radio label="text">文字</el-radio>
              <el-radio label="image">图片</el-radio>
              <el-radio label="search">搜索框</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="state.selectedData[state.selectedIndex].type == 'text'">
            <el-form-item label="文字内容">
              <el-input
                v-model="state.selectedData[state.selectedIndex].text"
                maxlength="10"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="文字颜色">
              <dc-color-picker
                v-model="state.selectedData[state.selectedIndex].textColor"
              ></dc-color-picker>
            </el-form-item>
          </template>
          <template v-if="state.selectedData[state.selectedIndex].type == 'image'">
            <el-form-item label="上传图片">
              <div class="sa-flex">
                <sa-uploader
                  v-model="state.selectedData[state.selectedIndex].src"
                  fileType="image"
                ></sa-uploader>
                <div class="tip">建议尺寸：56*56</div>
              </div>
            </el-form-item>
            <el-form-item label="选择链接">
              <dc-url v-model="state.selectedData[state.selectedIndex].url"></dc-url>
            </el-form-item>
          </template>
          <template v-if="state.selectedData[state.selectedIndex].type == 'search'">
            <el-form-item label="提示文字">
              <el-input
                v-model="state.selectedData[state.selectedIndex].placeholder"
                maxlength="10"
                show-word-limit
              ></el-input>
            </el-form-item>
			<el-form-item label="输入框圆角">
				<dc-slider v-model="state.selectedData[state.selectedIndex].borderRadius"></dc-slider>
			</el-form-item>
			<el-form-item label="搜索按钮">
				<el-radio-group v-model="state.selectedData[state.selectedIndex].showBtn">
					<el-radio label="1">显示</el-radio>
					<el-radio label="0">隐藏</el-radio>
				</el-radio-group>
			</el-form-item>
			<template v-if="state.selectedData[state.selectedIndex].width >= 3 && state.selectedData[state.selectedIndex].showBtn == 1">
				<div class="title sa-flex">
					搜索按钮配置
				</div>
				<el-form-item label="背景颜色">
					<dc-color-picker
						v-model="state.selectedData[state.selectedIndex].btnBgColol"
					></dc-color-picker>
				</el-form-item>
				<el-form-item label="文字颜色">
					<dc-color-picker
						v-model="state.selectedData[state.selectedIndex].btnTextColol"
					></dc-color-picker>
				</el-form-item>
				<el-form-item label="按钮圆角">
					<dc-slider v-model="state.selectedData[state.selectedIndex].btnBorderRadius"></dc-slider>
				</el-form-item>
			</template>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, reactive, ref, watch } from 'vue';
  import { cloneDeep } from 'lodash';
  import dcColorPicker from '../common/dc-color-picker.vue';
  import dcList from '../common/dc-list.vue';
  import dcUrl from '../common/dc-url.vue';
  import dcSlider from '../common/dc-slider.vue';

  const props = defineProps(['settingData', 'platformType', 'templateDetailType']);

  const pType = computed(() => (props.platformType == 'WechatMiniProgram' ? 'mp' : 'app'));

  watch(
    () => pType.value,
    (v1, v2) => {
      state.selectedData = props.settingData.navbar.list[v1] || [];
      state.selectedIndex = props.settingData.navbar.list[v1].length > 0 ? 0 : null;
    },
  );

  const state = reactive({
    tempData: {
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      minRow: 0,
      maxRow: 0,
      minCol: 0,
      maxCol: 0,
      type: 'text',

      text: '',
      textColor: '#111111',

	  showBtn:false,
	  btnBgColol:'#296DDD',
	  btnTextColol:'#ffffff',
	  btnBorderRadius:0,

      src: '',
      url: '',

      placeholder: '',
      borderRadius: 0,
    },

    selectFlag: false,

    selectedData: props.settingData.navbar.list[pType.value] || [],
    selectedIndex: props.settingData.navbar.list[pType.value].length > 0 ? 0 : null,
  });

  const scale = ref(38);
  const start = reactive({ row: 0, col: 0 });

  function selectItem(row, col) {
    // 开始的坐标
    if (!state.selectFlag) {
      start.row = row;
      start.col = col;
    }
    // 结束存储数据
    if (state.selectFlag) {
      state.selectedData.push(cloneDeep(state.tempData));
      state.selectedIndex = state.selectedData.length - 1;
      clearTempData();
      updatelist();
    }
    state.selectFlag = !state.selectFlag;
    onMouseover(row, col);
  }
  function onMouseover(row, col) {
    if (state.selectFlag) {
      let squaresArr = [
        start.row + '*' + start.col,
        row + '*' + col,
        start.row + '*' + col,
        row + '*' + start.col,
      ];
      let min = squaresArr.sort()[0].split('*');
      let max = squaresArr.sort()[3].split('*');
      // 面积不可重叠
      const flag = state.selectedData.some((f) => {
        return isOverlap(f, {
          width: Math.abs(start.col - col) + 1,
          height: Math.abs(start.row - row) + 1,
          left: min[1] - 1,
          top: min[0] - 1,
        });
      });
      if (!flag) {
        // 宽高
        state.tempData.width = Math.abs(start.col - col) + 1;
        state.tempData.height = Math.abs(start.row - row) + 1;
        // 定位
        state.tempData.left = min[1] - 1;
        state.tempData.top = min[0] - 1;
        // xy轴最大最小值
        state.tempData.minRow = min[0];
        state.tempData.minCol = min[1];
        state.tempData.maxRow = max[0];
        state.tempData.maxCol = max[1];
      }
    }
  }
  // 删除选中的区域
  function deleteItem(index) {
    state.selectedData.splice(index, 1);
    state.selectedIndex = state.selectedData.length - 1;
    updatelist();
  }
  // 取消选中区域
  function onCancelSelect() {
    state.selectFlag = false;
    clearTempData();
  }
  function onPositionSelect(index) {
    state.selectedIndex = index;
  }
  // 提交
  function updatelist() {
    let deleteData = ['minRow', 'maxRow', 'minCol', 'maxCol'];
    let tempData = [];
    state.selectedData.forEach((s) => {
      let obj = s;
      deleteData.forEach((d) => {
        delete obj[d];
      });
      tempData.push(obj);
    });
    props.settingData.navbar.list[pType.value] = tempData;
  }
  // 清除数据
  function clearTempData() {
    state.tempData = cloneDeep({
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      minRow: 0,
      maxRow: 0,
      minCol: 0,
      maxCol: 0,

      type: 'text',

      text: '',
      textColor: '#111111',
	
	  showBtn:false,
	  btnBgColol:'#296DDD',
	  btnTextColol:'#ffffff',
	  btnBorderRadius:0,

      src: '',
      url: '',

      placeholder: '',
      borderRadius: 0,
    });
  }
  // 选择面积不可重叠
  function isOverlap(obj1, obj2) {
    const l1 = { x: obj1.left, y: obj1.top };
    const r1 = { x: obj1.left + obj1.width, y: obj1.top + obj1.height };
    const l2 = { x: obj2.left, y: obj2.top };
    const r2 = { x: obj2.left + obj2.width, y: obj2.top + obj2.height };
    if (l1.x >= r2.x || l2.x >= r1.x || l1.y >= r2.y || l2.y >= r1.y) return false;
    return true;
  }
</script>

<style lang="scss" scoped>
  .navbar-map {
    position: relative;
    margin: 0 auto 16px;
    border-spacing: 0;
    border-collapse: collapse;
    .map-item {
      text-align: center;
      border: 1px solid var(--sa-border);
      box-sizing: border-box;
      .el-icon {
        font-size: 20px;
        color: var(--sa-place);
      }
      &--active {
        background-color: var(--sa-background-hex-hover);
      }
    }
    .left {
      position: absolute;
      top: -1px;
      left: -1px;
      z-index: 2;
      height: 40px;
      background: #fff;
      display: flex;
      align-items: center;
      img {
        width: 38px;
      }
    }
    .WechatMiniProgram {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 76px;
      height: 40px;
      background: #fff;
      display: flex;
      align-items: center;
      img {
        width: 100%;
        height: 30px;
      }
    }
    .position-item {
      position: absolute;
      background: var(--sa-background-hex-active);
      border: 1px solid var(--el-color-primary);
      cursor: pointer;
      .close {
        display: none;
        font-size: 12px;
        color: var(--el-color-primary);
        background: #fff;
        border-radius: 6px;
        position: absolute;
        top: -6px;
        right: -6px;
        z-index: 10;
      }
      &--active {
        background: var(--sa-background-hex-active);
        border: 1px solid var(--el-color-primary);
        .close {
          display: block;
        }
      }
    }
  }
</style>
